// 等待加载页
var loadMask = $("<div>商品加载中 . . .</div>").css({
    width:"100%",
    height:"100%",
    background:"#fff",
    opacity:"0.9",
    position:"fixed",
    top:"0",
    left:"0",
    "text-align":"center",
    "line-height":"500px",
    color:"#0058a3",
    fontSize:"32px",
    "font-weight":"700"
})
$("body").append(loadMask)
// 首次发送请求获取商品数据
$.get("./php/goods.php",res=>{
    var {meta:{status,msg},data} = res;
    if(status === 2){
        var str = '';
        for(var i=0; i<data.length;i++){
            str += `
            <div class="goods-box">
                <a href="detail.html?id=${data[i].id}">
                    <div class="goods-imgs">
                        <div class="goods-imgs-display">
                            <img src="${data[i].delay_path}">
                        </div>
                        <div class="goods-imgs-hide">
                            <img src="${data[i].hide_path}">
                        </div>
                    </div>
                    <div class="goods-info">
                        <p class="goods-vip-price">${data[i].new_pro}</p>
                        <p class="goods-name">${data[i].name}</p>
                        <p class="goods-content">${data[i].info}</p>
                        <div class="goods-price-add">
                            <div class="goods-price">
                                <span class="goods-price-symbol">￥</span>
                                <span class="goods-price-price">${data[i].price}</span>
                                <span class="goods-price-symbol">.00</span>
                            </div>
                            <div class="goods-add">
                                <span class="iconfont icon-gouwudai"></span>
                            </div>
                        </div>
                        <p class="goods-type">${data[i].type}</p>
                    </div>
                </a>
            </div>
            `
        }
        $(".goods-list-box").append(str)
    }
    // $(".goods-total").text(data.length);
    $(".goods-total").text("424");
    $(".goods-show").text($(".goods-list-box").children().length);

    // 鼠标移入事件
$(".goods-imgs").mouseover(function(){
    $(this).find(".goods-imgs-hide").css("opacity","1")
})
$(".goods-imgs").mouseout(function(){
    $(this).find(".goods-imgs-hide").css("opacity","0")
})

$(`.goods-box`).mouseover(function(){
    $(this).find(".goods-add").css("opacity","1")
    $(this).find(".goods-type").css("opacity","1")
})
$(`.goods-box`).mouseout(function(){
    $(this).find(".goods-add").css("opacity","0")
    $(this).find(".goods-type").css("opacity","0")
})
    loadMask.remove()
},"json")

// 加载更多进行加载
var start = 25
$(".goods-more").click(function(){
    $.get("/ikea",{
        c: "cnweb",
        v: 20210322,
        category: "fu003",
        start: start,
        end: start + 25,
    },res=>{
        var {moreProducts:{productWindow}} = res;
        // console.log(res);
        for(let i=0; i<productWindow.length;i++){
            var {gprDescription} = productWindow[i];
        }
        var str = '';
        for(let j=0; j< productWindow.length;j++){
            var {variants} = gprDescription;

            if(productWindow[j].gprDescription.variants.length){
                str += `
                <div class="goods-box">
                    <a href="">
                        <div class="goods-imgs">
                            <div class="goods-imgs-display">
                                <img src="${productWindow[j].mainImageUrl}">
                            </div>
                            <div class="goods-imgs-hide">
                                <img src="${productWindow[j].gprDescription.variants[0].imageUrl}">
                            </div>
                        </div>
                        <div class="goods-info">
                        <!-- <p class="goods-vip-price">${productWindow[j].new_pro}</p> -->
                            <p class="goods-name">${productWindow[j].name}</p>
                            <p class="goods-content">${productWindow[j].typeName}</p>
                            <div class="goods-price-add">
                                <div class="goods-price">
                                    <span class="goods-price-symbol">￥</span>
                                    <span class="goods-price-price">${productWindow[j].priceNumeral}</span>
                                    <span class="goods-price-symbol">.00</span>
                                </div>
                                <div class="goods-add">
                                    <span class="iconfont icon-gouwudai"></span>
                                </div>
                            </div>
                            <p class="goods-type">+${productWindow[j].gprDescription.numberOfVariants}种款式</p>
                        </div>
                    </a>
                </div>
                `
            }else{
                str += `
                <div class="goods-box">
                    <a href="">
                        <div class="goods-imgs">
                            <div class="goods-imgs-display">
                                <img src="${productWindow[j].mainImageUrl}">
                            </div>
                            <div class="goods-imgs-hide">
                                <img src="${productWindow[j].mainImageUrl}">
                            </div>
                        </div>
                        <div class="goods-info">
                        <!-- <p class="goods-vip-price">${productWindow[j].new_pro}</p> -->
                            <p class="goods-name">${productWindow[j].name}</p>
                            <p class="goods-content">${productWindow[j].typeName}</p>
                            <div class="goods-price-add">
                                <div class="goods-price">
                                    <span class="goods-price-symbol">￥</span>
                                    <span class="goods-price-price">${productWindow[j].priceNumeral}</span>
                                    <span class="goods-price-symbol">.00</span>
                                </div>
                                <div class="goods-add">
                                    <span class="iconfont icon-gouwudai"></span>
                                </div>
                            </div>
                            <p class="goods-type"></p>
                        </div>
                    </a>
                </div>
                `
            }
        }
        $(".goods-list-box").append(str);
        $(".goods-total").text("424");
        $(".goods-show").text($(".goods-list-box").children().length);

        // 鼠标移入事件
        $(".goods-imgs").mouseover(function(){
            $(this).find(".goods-imgs-hide").css("opacity","1")
        })
        $(".goods-imgs").mouseout(function(){
            $(this).find(".goods-imgs-hide").css("opacity","0")
        })

        $(`.goods-box`).mouseover(function(){
            $(this).find(".goods-add").css("opacity","1")
            $(this).find(".goods-type").css("opacity","1")
        })
        $(`.goods-box`).mouseout(function(){
            $(this).find(".goods-add").css("opacity","0")
            $(this).find(".goods-type").css("opacity","0")
        })

        start += 25
        loadMask.remove()
    },"json")
})
